<script setup lang="ts">
import { reactive } from "vue";
import dayjs from 'dayjs';
import type { DateDataType } from "./index.d"
import { useSettingStore } from "@/stores/modules/setting"

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null
});

const { setSettingShow } = useSettingStore()
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateYear = dayjs().format("YYYY.MM.DD");
    dateData.dateDay = dayjs().format("hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn()
</script>

<template>
  <div class="title_wrap flex justify-between">
    <div class="title-left">
      <div class="title-img">
        <img src="@/assets/img/header-img/title-img.png" alt="">
        <div class="title-content flex justify-between w-[424px] h-[37px]">
          <img src="@/assets/img/header-img/title-main.png" alt="" class="w-[140px] h-[37px]] ">
          <span class="title-text">云聚数据大屏</span>
        </div>
      </div>
    </div>
    <div class="title-right flex items-center">
      <div class="title-time-content w-[417px] h-[28px] flex items-center">
        <div class=" time-text w-[130px] h-full ">{{ dateData.dateDay }}</div>
        <img src="@/assets/img/header-img/time-right-line.png " alt="" class="w-[3px] h-[25px] ml-[24px] mr-[24px]">
        <div class=" time-text w-[130px] h-full ">{{ dateData.dateYear }}</div>
        <img src="@/assets/img/header-img/time-right-line.png" alt="" class="w-[3px] h-[25px] ml-[24px] mr-[24px]">
        <div class="time-text-week  h-full ">{{ dateData.dateWeek }}</div>
      </div>
      <img src="@/assets/img/header-img/title-log-out.png" class="title-log-out w-[40px] h-[40px]" alt="">
    </div>
  </div>
</template>

<style scoped lang="scss">
.title_wrap {
  height: 74px;
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 35px;
}

.title-img {
  width: 550px;
  height: 74px;
  position: relative;

  .title-content {
    position: absolute;
    left: 63px;
    top: 20px;
  }

  .title-text {
    font-weight: 700;
    font-size: 32px;
    color: #6191EC;
    line-height: 32px;
    letter-spacing: 10px;
    text-shadow: 0px 0px 12px rgba(0, 48, 138, 0.65);
    font-style: normal;
    text-transform: none;
  }
}

.time-text {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 24px;
  color: #D9E7FF;
  line-height: 28px;
  // letter-spacing: 4px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.time-text-week {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 20px;
  color: #D9E7FF;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
